// import echarts from "echarts";
import echarts from "../../../components/BaseEcharts/utils/echarts";
import _ from "lodash";

function optionBar(resData) {
  // console.log("resData", resData);
  const resultData = disposeResData(resData);

  const firstTypeSeries = []; // 1F 2F 的排列
  const secondTypeSeries = []; // 水轮发电机 主变压器 的排列

  // 计算占位百分比
  const firstAllCount = resultData.firstTypeWidth.reduce(
    (sum, item) => (sum += item),
    0
  );
  // console.log("firstAllCount", firstAllCount);
  resultData.firstX.forEach((item, index) => {
    firstTypeSeries.push({
      data: [
        {
          name: item,
          value: 1,
        },
      ],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 10],
        textStyle: {
          color: "#777",
          fontSize: 16,
        },
      },
      type: "bar",
      barGap: 0,
      barWidth: `${(
        (resultData.firstTypeWidth[index] / firstAllCount) *
        100
      ).toFixed(2)}%`,
      itemStyle: {
        normal: {
          // color: 'rgba(255, 71, 119, .5)',
          color: "#fff",
        },
      },
      xAxisIndex: 1,
      yAxisIndex: 1,
    });
  });

  // console.log("firstTypeSeries", firstTypeSeries);
  const secondAllCount = resultData.secondTypeWidth.reduce(
    (sum, item) => (sum += item),
    0
  );
  resultData.secondX.forEach((item, index) => {
    secondTypeSeries.push({
      data: [
        {
          name: item,
          value: 1,
        },
      ],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 40],
        textStyle: {
          color: "#777",
          fontSize: 16,
        },
      },
      type: "bar",
      barGap: 0,
      barWidth: `${(
        (resultData.secondTypeWidth[index] / secondAllCount) *
        100
      ).toFixed(2)}%`,
      itemStyle: {
        normal: {
          // color: 'rgba(246, 146, 28, .8)',
          color: "#ccc",
        },
      },

      xAxisIndex: 2,
      yAxisIndex: 1,
    });
  });

  const option = {
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true },
        saveAsImage: {
          //excludeComponents :['toolbox'],
          pixelRatio: 5,
        },
      },
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: { type: "none" },
      backgroundColor: "transparent",
      formatter: (obj) => {
        // console.log("obj", obj);
        if (!obj[0]) return;
        if (!obj[0].data) return;

        const index = obj[0].dataIndex;
        const id = resultData.ids[index];
        const curObj = resData.find((item) => item.id == id);
        if (!curObj) return;
        // console.log("数据 tooltips", curObj);
        return `<div style="padding: 7px 14px; background: #fff; box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.19); border-radius: 10px; border: solid 1px; font-size: 18px">
        <i style="display: inline-block; width: 16px; height: 16px; border-radius: 8px; background: ${obj[0].color}; vertical-align: middle"></i> <span>${curObj["fb_name"]}</span>
                  <p style="height: 25px; lineHeight: 25px; color: #000000">设备类型: ${curObj["设备类型"]}</p>
                  <p style="height: 25px; lineHeight: 25px; color: #000000">设备名称: ${curObj["设备名称"]}</p>
                  <p style="height: 25px; lineHeight: 25px; color: #000000">设备类型得分: ${curObj["设备类型得分"]}</p>
                  <p style="height: 25px; lineHeight: 25px; color: #555555">

                  </p>
  			        </div>`;
      },
    },
    grid: [
      {
        top: 70,
        bottom: 101,
        left: 50,
        right: 30,
      },
      {
        height: 0,
        bottom: 70,
        left: 56,
        right: 35,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: resultData.xData,
        gridIndex: 0,
        // 标签颜色
        axisLabel: {
          color: "#000",
          textStyle: {
            fontSize: 13, //更改坐标轴文字大小
          },
        },
        // 轴线颜色
        axisLine: {
          lineStyle: {
            color: "#e7e7e7",
          },
        },
        zlevel: 2,
      },

      // 辅助柱形图x轴设置
      {
        type: "category",
        gridIndex: 1,
        // 不显示x轴
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },

        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        zlevel: 1,
      },
      {
        type: "category",
        gridIndex: 1,
        // 不显示x轴
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },

        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        zlevel: 0,
      },
    ],
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        axisLabel: {
          color: "#333",
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#ccc",
          },
        },
        axisTick: {
          lineStyle: {
            color: "#ccc",
          },
        },
        zlevel: 2,
      },
      {
        type: "value",
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        zlevel: 1,
      },
    ],
    series: [
      // 上顶盖
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [40, 10],
        symbolOffset: [0, -6],
        symbolPosition: "end",
        z: 12,
        // "barWidth": "0",
        label: {
          normal: {
            show: false,
          },
        },
        color: "#2DB1EF",
        data: resultData.yData,
      },
      // 下顶盖
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [40, 10],
        symbolOffset: [0, 7],
        // "barWidth": "20",
        z: 12,
        color: "rgba(125, 177, 239, 1)",
        data: resultData.yData,
      },
      // 圆柱
      {
        type: "bar",
        //silent: true,
        barWidth: "40",
        barGap: "10%", // Make series be overlap
        barCateGoryGap: "10%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
              {
                offset: 0,
                color: "rgba(30, 110, 207, 1)",
              },
              {
                offset: 1,
                color: "rgba(30, 110, 207, .6)",
              },
            ]),
          },
        },
        data: resultData.yData,
        label: {
          show: true,
          position: "top",
          fontSize: "12px",
          color: "rgba(30, 110, 207, 1)",
          formatter: (params) => {
            // console.log("kks params", params);
            if (params.value == 0) {
              return "";
            } else {
              return params.value;
            }
          },
        },
      },

      ...firstTypeSeries,
      ...secondTypeSeries,
    ],
  };

  // const option2 = {
  //   "grid": [{
  //       top: 20,
  //       bottom: 50,
  //       left: 50,
  //       right: 30,
  //     },
  //     {
  //       height: 0,
  //       bottom: 20,
  //       left: 56,
  //       right: 35,
  //     }],
  //   tooltip: {
  //     show: true,
  //     trigger: "axis",
  //     axisPointer: { type: "none" },
  //     backgroundColor: "transparent",
  //     formatter: (obj) => {
  //       return `<div style="padding: 7px 14px; background: #fff; box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.19); border-radius: 10px; border: solid 1px; font-size: 18px">
  //                 <p style="height: 25px; lineHeight: 25px; color: #000000">评分: ${obj[0].name}</p>
  //                 <p style="height: 25px; lineHeight: 25px; color: #555555">
  //                   <i style="display: inline-block; width: 16px; height: 16px; border-radius: 8px; background: ${obj[0].color}; vertical-align: middle"></i>
  //                   评分个数:${obj[0].value}
  //                 </p>
  // 			        </div>`
  //     }
  //   },
  //   // animation: false,
  //   "xAxis": [{
  //     "type": "category",
  //     "data": xData,
  //     "axisTick": {
  //       "show": false
  //     },
  //     "axisLine": {
  //       show: true,
  //       "lineStyle": {
  //         "color": "#BDC9D8"
  //       }
  //     },
  //     "axisLabel": {
  //       rotate: xData.length > 10 ? 15 : 0,
  //       interval: 0,
  //       color: '#ccc',
  // 			fontSize: 14,
  // 			fontWeight: 500,
  // 			lineHeight: 30,
  //     }
  //   }],
  //   "yAxis": [{
  //     show: true,
  //     "type": "value",
  //     "axisLabel": {
  //       show: false
  //     },
  //     "splitLine": {
  //       show: true,
  // 			lineStyle: {
  // 				color: '#BDC9D8'
  // 			}
  //     },
  //     axisTick: {
  // 			show: false
  // 		},
  //     axisLabel: {
  // 			fontSize: 14,
  // 			color: '#ccc',
  // 			fontWeight: 500
  // 		}
  //   }],
  //   "series": [
  //     // 上顶盖
  //     {
  //     "name": "",
  //     type: 'pictorialBar',
  //     symbolSize: [40, 10],
  //     symbolOffset: [0, -6],
  //     symbolPosition: 'end',
  //     z: 12,
  //     // "barWidth": "0",
  //     "label": {
  //       "normal": {
  //         "show": false,
  //       }
  //     },
  //     color: "#2DB1EF",
  //     data: yData
  //   },
  //   // 下顶盖
  //   {
  //     name: '',
  //     type: 'pictorialBar',
  //     symbolSize: [40, 10],
  //     symbolOffset: [0, 7],
  //     // "barWidth": "20",
  //     z: 12,
  //     "color": "rgba(125, 177, 239, 1)",
  //     "data": yData
  //   },
  //   // 圆柱
  //   {
  //     type: 'bar',
  //     //silent: true,
  //     "barWidth": "40",
  //     barGap: '10%', // Make series be overlap
  //     barCateGoryGap: '10%',
  //     itemStyle: {
  //       normal: {
  //         color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
  //           offset: 0,
  //           color: "rgba(30, 110, 207, 1)"
  //         },
  //         {
  //           offset: 1,
  //           color: "rgba(30, 110, 207, .6)"
  //         }
  //         ]),
  //       },
  //     },
  //     data: yData,
  //     label: {
  //       show: true,
  // 			position: "top",
  //       fontSize: "12px",
  //       color: "rgba(30, 110, 207, 1)"
  //     }
  //   }
  //   ]
  // };

  return {
    option,
    ids: resultData.ids,
  };
}

function disposeResData(resData) {
  const returnObj = {
    xData: [],
    yData: [],
    ids: [],
    firstX: [], // 1F,2F
    firstTypeWidth: [],
    secondX: [], // 水轮发电机组设备
    secondTypeWidth: [],
  };
  //设备类型 - 机组号 二重排序
  const groupTree = _.groupBy(resData, "设备类型");
  for (let key in groupTree) {
    groupTree[key] = _.groupBy(groupTree[key], "fb_name");
  }
  // console.log("groupTree", groupTree);

  // 处理多重不定宽分组的 计算依赖数据
  for (let type in groupTree) {
    let typeNumber = 0;
    for (let name in groupTree[type]) {
      const list = groupTree[type][name];

      list.forEach((item) => {
        returnObj.xData.push("");
        returnObj.yData.push(item["设备类型得分"]);
        returnObj.ids.push(item?.id);
      });
      returnObj.xData.push("");
      returnObj.yData.push(null);

      typeNumber += list.length + 1;
      returnObj.firstX.push(name);
      returnObj.firstTypeWidth.push(list.length);

      returnObj.firstX.push("");
      returnObj.ids.push("");
      returnObj.firstTypeWidth.push(1);
    }
    returnObj.secondX.push(type);
    // 该组 所占多少最小单元
    returnObj.secondTypeWidth.push(typeNumber);
  }

  // 删除最后一个
  returnObj.xData.pop();
  returnObj.yData.pop();
  returnObj.firstTypeWidth.pop();
  returnObj.firstX.pop();
  returnObj.secondTypeWidth[returnObj.secondTypeWidth.length - 1] =
    returnObj.secondTypeWidth[returnObj.secondTypeWidth.length - 1] - 1;

  // console.log("returnObj", returnObj);
  return returnObj;
}

export default optionBar;
